<template>
    <div class="login">
        <van-form @submit="onSubmit">
            <van-field
                v-model="mobile"
                name="mobile"
                placeholder="手机号"
                autocomplete="new-mobile"
                :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                placeholder="密码"
                autocomplete="new-password"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            mobile: '',
            password: '',
        };
    },
    methods: {
        async onSubmit(values) {
            console.log('submit', values);
            const { data: res } = await this.$http.post('/login', values);
            // console.log(res);
            if (res.code !== 200) {
                this.$notify({
                    message: res.message,
                    type: 'danger',
                });
                return;
            }
            // 走到这里，说明登录成功了，登录成功一定会返回 token，
            // 我们把它保存到 sessionStorage 中，在请求需要登录才能调用的接口时，会使用到
            window.sessionStorage.setItem('token', res.data.token);
            // 跳转到签到页面
            window.location.href = '/signin';
        },
    },
};
</script>

<style lang="less" scoped></style>
